<template>
    <vk-data-dialog v-model="value.show" :title="page.title" :top="page.top" :width="page.width" mode="form"
        max-height="800px" width="850px" @open="onOpen" @closed="onClose" :close-on-click-modal="true">
        <div id="tableId-0">
            <div v-for="(v, i) in value.printData" :key="i" style="page-break-after: always;" :style="{}">

                <div style="width: 850px; align-content: center;">
                    <!-- <h-watermark title="全安检测" :mobile="v.no"></h-watermark> -->
                    <div style=" z-index: -1;display: flex;
                        -ms-flex-align: center;
                        align-items: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -ms-flex-direction: column;
                        flex-direction: column;" :style="{
                            height: getPageHeight(v) + 'px'
                        }">
                        <div>
                            <div style=" display: flex;width: 100%; font-family: 宋体;margin-top: 20px;">
                                <div style="width: 100px;">
                                    <img src="@/static/quanan-log.png" height="80px" width="90px" />
                                </div>
                                <div style="display: flex;flex-direction: column;justify-content: center;">
                                    <div>
                                        <span
                                            style="font-size: 30px; color: black;font-weight: bold; line-height: 34px;flex-wrap: nowrap;width: 100%;">广
                                            东 全
                                            安 检 测 科 技 有 限 公
                                            司</span>
                                    </div>
                                    <div style="color: black; font-size: 23px;font-weight: bold;">
                                        GuangDong QuanAn Testing
                                        Technology Co.,Ltd
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            style="width: 95%;  padding: 0px; background-color: black;  margin-top: 3px; font-weight: bold;border-bottom-color: #000;border-bottom-style:solid ; border-bottom-width: 2px;">
                        </div>
                        <div
                            style="width: 95%;  padding: 0px; background-color: black;  margin-top: 5px; font-weight: bold;font-weight: bold;border-bottom-color: #000;border-bottom-style:solid ; border-bottom-width: 1px;">
                        </div>
                        <div style=" position: relative; width: 95%; font-family: 宋体;">
                            <div
                                style="display: inline-block; position: absolute; left: 50%; transform: translateX(-50%);">
                                <div style="font-size: 30px !important; color: black; margin-top: 10px;">
                                    检 测 报 告
                                </div>
                                <div style="font-size:30px; color: black; margin-top: 30px; font-family: 宋体;">
                                    TEST REPORT
                                </div>
                            </div>
                            <div style="display: inline-block; margin-left: 79%; margin-top: 5px;">
                                <vue-qr :logoSrc="logourl" :margin="3"
                                    :text="`http://www.gdquanan.com/#/pages/qr_info/d?no=${v.no}`" :size="130"></vue-qr>
                                <div style=" text-align: center; font-size: 10px;line-height: 12px; font-family: 宋体;">
                                    扫描二维码辨别报告真伪
                                </div>
                            </div>
                        </div>
                        <div style="width: 95%;">
                            <div style="margin-bottom: 5px;"><span
                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">报告编号：</span>
                                <span style="font-size: 16px; font-family: 宋体; color: black;">{{ v.no }}</span>
                            </div>
                            <div>
                                <table class="daying" style="border-spacing: 0;
                            width: 100%;
                            border-collapse: collapse;
                            font-family: 宋体;
                            color: #000">
                                    <tr>
                                        <td align="center" style="width: 15%; height: 30px;    border: 1px solid #000;
    height: 15px"><span style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;border:1pxsolid#000;height:15px">委托单位/人</span>
                                        </td>
                                        <td align="center" style="width: 35%;border: 1px solid #000;height: 15px"><span
                                                style="font-size: 16px;">{{
                                                v.client_name }}</span></td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">送检日期</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="font-size: 16px;">{{
                                                    vk.pubfn.timeFormat(v.detect_time, "yyyy年MM月dd日") }}</span></td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="height: 30px;border: 1px solid #000;height: 15px">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">抽/送样者</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="font-size: 16px;">{{ v.submitUser }}</span></td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测类别</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="font-size: 16px;">
                                                {{ v.detection_type }}</span></td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="height: 30px;border: 1px solid #000;height: 15px">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测项目</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="font-size: 16px;">{{
                                                v.detection_standard_name }}</span></td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测标准</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="font-size: 16px;">{{
                                                v.detection_standard }}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div
                            style="align-items: center; font-size: 18px; margin-top: 6px; margin-bottom: 6px; font-family: 宋体; color: black;">
                            检 测 结 果</div>
                        <div style="width: 95%;">

                            <div>
                                <table class="daying" style=" border-spacing: 0;
                                    width: 100%;
                                    border-collapse: collapse;
                                    font-family: 宋体;
                                    color: #000">
                                    
                                    <tr style="height: 30px;">
                                        <td align="center" width="8%" style="border: 1px solid #000;height: 15px"><span
                                                style="font-weight: bold; font-size: 16px; font-family: 黑体;">序号</span>
                                        </td>
                                        <td align="center" width="15%" style="border: 1px solid #000;height: 15px"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">样品编号</span>
                                        </td>
                                        <td align="center" width="20%" style="border: 1px solid #000;height: 15px"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">样品名称</span>
                                        </td>
                                        <td align="center" colspan="2" width="35%"
                                            style="border: 1px solid #000;height: 15px">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测结论</span>
                                        </td>
                                        <td align="center" colspan="2" width="10%"
                                            style="border: 1px solid #000;height: 15px">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">样品结果</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">备注</span>
                                        </td>
                                    </tr>

                                    <!-- 动态行高和字体大小 -->
                                    <tr v-for="(detail, index) in getsubList(v.sample_list, 1)" :key="index"
                                        :style="{ height: calcRowHeight(v.sample_list.length) + 'px', fontSize: calcFontSize(v.sample_list.length) + 'px' }">
                                        <td align="center" style="border: 1px solid #000;height: 15px">{{ index + 1 }}
                                        </td>
                                        <td align="center" style="border: 1px solid #000;height: 15px">{{
                                            detail.sampleno }}</td>
                                        <td align="center" style="border: 1px solid #000;height: 15px">{{
                                            detail.samplename }}</td>
                                        <td align="center" colspan="2" style="border: 1px solid #000;height: 15px"
                                            :style="{ 'font-size': v.detection_standard_name.length > 6 ? '13px' : '14px' }">
                                            {{
                                            detail.result }}
                                        </td>
                                        <td align="center" colspan="2" style="border: 1px solid #000;height: 15px">{{
                                            detail.yxresult }}</td>
                                        <td align="center" style="border: 1px solid #000;height: 15px">{{ detail.remark
                                            }}</td>
                                    </tr>

                                </table>
                                <!--//?印章-->
                                <div v-if="v.sample_list.length > pageSzie"
                                    style="background-color: aquamarine; width: 100%; font-size: 16px; font-weight: bold; margin-top: 3%; margin-bottom: 10%; position: relative;">

                                    <div
                                        style="z-index: 999; position: absolute; transform: translateX(-140%) translateY(-50%); margin-left: 100%;background-color: transparent;">
                                        <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                            width="150px;" height="150px;">
                                    </div>
                                    <div
                                        style="margin-left: 100%; white-space: nowrap; position: absolute; transform: translateX(-100%); font-family: 黑体;">
                                        此处未盖本公司快检专用章，则本报告无效。
                                    </div>
                                </div>
                                <div v-if="v.sample_list.length > pageSzie"
                                    style="margin-top: 100px; margin-bottom: 150px;display: flex;justify-content: center;align-items: end;font-size: 9px;padding-top: 10px;padding-bottom: 10px;">
                                    <div>第一页</div>
                                </div>
                                <div v-if="v.sample_list.length > pageSzie" style="padding-top: 7px;">

                                    <table class="daying" style=" border-spacing: 0;            
                                    width: 100%;
                                    margin-top: 3%;
                                    border-collapse: collapse;
                                    font-family: 宋体;
                                    color: #000">


                                        <!-- 动态行高和字体大小 -->
                                        <tr v-for="(detail, index) in getsubList(v.sample_list, 2)" :key="index"
                                            :style="{ height: calcRowHeight(v.sample_list.length) + 'px', fontSize: calcFontSize(v.sample_list.length) + 'px' }">
                                            <td align="center" width="8%" style="border: 1px solid #000;height: 15px">{{
                                                index + pageSzie + 1 }}</td>
                                            <td align="center" width="15%" style="border: 1px solid #000;height: 15px">
                                                {{ detail.sampleno }}</td>
                                            <td align="center" width="20%" style="border: 1px solid #000;height: 15px">
                                                {{ detail.samplename }}</td>
                                            <td align="center" colspan="2" width="35%"
                                                style="border: 1px solid #000;height: 15px">{{ detail.result }}</td>
                                            <td align="center" colspan="2" width="10%"
                                                style="border: 1px solid #000;height: 15px">{{ detail.yxresult }}</td>
                                            <td align="center" style="border: 1px solid #000;height: 15px">{{
                                                detail.remark }}</td>
                                        </tr>

                                    </table>
                                </div>
                            </div>

                        </div>

                        <div v-if="v.sample_list.length > 47"
                            style=" width: 95%; font-size: 16px; font-weight: bold;  margin-bottom: 10%; position: relative;"
                            :style="{ 'margin-top': v.sample_list.length > pageSzie ? '-20px' : '2px' }">

                            <div style="z-index: 999; position: absolute;  margin-left: 100%;background-color: transparent;"
                                :style="{ 'transform': v.sample_list.length > pageSzie ? ' translateX(-140%) translateY(-20%)' : ' translateX(-140%) translateY(-20%)' }">
                                <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                    width="150px;" height="150px;">
                            </div>
                            <div
                                style="margin-left: 100%;margin-top: 30px; white-space: nowrap; position: absolute; transform: translateX(-100%); font-family: 黑体;">
                                此处未盖本公司快检专用章，则本报告无效。
                            </div>
                        </div>

                        <div v-if="v.sample_list.length > 47"
                            style="margin-top: 100px; margin-bottom: 50px;display: flex;justify-content: center;align-items: end;font-size: 9px;padding-top: 10px;padding-bottom: 10px;">
                            <div>第二页</div>
                        </div>
                        <div v-if="v.sample_list.length > 47" style="padding-top: 7px; width: 95%;">
                            <table class="daying" style=" border-spacing: 0;            
                                    width: 100%;
                                    margin-top: 3%;
                                    border-collapse: collapse;
                                    font-family: 宋体;
                                    color: #000">
                                <!-- 动态行高和字体大小 -->
                                <tr v-for="(detail, index) in getsubList(v.sample_list, 3)" :key="index"
                                    :style="{ height: calcRowHeight(v.sample_list.length) + 'px', fontSize: calcFontSize(v.sample_list.length) + 'px' }">
                                    <td align="center" width="8%" style="border: 1px solid #000;height: 15px">{{
                                        index + 47 + 1 }}</td>
                                    <td align="center" width="15%" style="border: 1px solid #000;height: 15px">
                                        {{ detail.sampleno }}</td>
                                    <td align="center" width="20%" style="border: 1px solid #000;height: 15px">
                                        {{ detail.samplename }}</td>
                                    <td align="center" colspan="2" width="35%"
                                        style="border: 1px solid #000;height: 15px">{{ detail.result }}</td>
                                    <td align="center" colspan="2" width="10%"
                                        style="border: 1px solid #000;height: 15px">{{ detail.yxresult }}</td>
                                    <td align="center" style="border: 1px solid #000;height: 15px">{{
                                        detail.remark }}</td>
                                </tr>

                            </table>
                        </div>
                        <!--//?印章-->
                        <div v-if="v.sample_list.length > 47"
                            style=" width: 95%; font-size: 16px; font-weight: bold;  margin-bottom: 10%; position: relative;"
                            :style="{ 'margin-top': v.sample_list.length > pageSzie ? '-20px' : '2px' }">

                            <div style="z-index: 999; position: absolute;  margin-left: 100%;background-color: transparent;"
                                :style="{ 'transform': v.sample_list.length > pageSzie ? ' translateX(-140%) translateY(-20%)' : ' translateX(-140%) translateY(-20%)' }">
                                <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                    width="150px;" height="150px;">
                            </div>
                            <div
                                style="margin-left: 100%;margin-top: 30px; white-space: nowrap; position: absolute; transform: translateX(-100%); font-family: 黑体;">
                                此处未盖本公司快检专用章，则本报告无效。
                            </div>
                        </div>

                        <div v-if="v.sample_list.length > 47"
                            style="margin-top: 100px; margin-bottom: 50px;display: flex;justify-content: center;align-items: end;font-size: 9px;padding-top: 10px;padding-bottom: 10px;">
                            <div>第三页</div>
                        </div>

                        <div v-if="v.sample_list.length > 79" style="padding-top: 7px; width: 95%;">
                            <table class="daying" style=" border-spacing: 0;            
                                    width: 100%;
                                    margin-top: 3%;
                                    border-collapse: collapse;
                                    font-family: 宋体;
                                    color: #000">
                                <!-- 动态行高和字体大小 -->
                                <tr v-for="(detail, index) in getsubList(v.sample_list, 4)" :key="index"
                                    :style="{ height: calcRowHeight(v.sample_list.length) + 'px', fontSize: calcFontSize(v.sample_list.length) + 'px' }">
                                    <td align="center" width="8%" style="border: 1px solid #000;height: 15px">{{
                                        index + 79 + 1 }}</td>
                                    <td align="center" width="15%" style="border: 1px solid #000;height: 15px">
                                        {{ detail.sampleno }}</td>
                                    <td align="center" width="20%" style="border: 1px solid #000;height: 15px">
                                        {{ detail.samplename }}</td>
                                    <td align="center" colspan="2" width="35%"
                                        style="border: 1px solid #000;height: 15px">{{ detail.result }}</td>
                                    <td align="center" colspan="2" width="10%"
                                        style="border: 1px solid #000;height: 15px">{{ detail.yxresult }}</td>
                                    <td align="center" style="border: 1px solid #000;height: 15px">{{
                                        detail.remark }}</td>
                                </tr>

                            </table>
                        </div>
                        <!--//?印章-->
                        <div style=" width: 95%; font-size: 16px; font-weight: bold;  margin-bottom: 10%; position: relative;"
                            :style="{ 'margin-top': v.sample_list.length > pageSzie ? '-20px' : '2px' }">

                            <div style="z-index: 999; position: absolute;  margin-left: 100%;background-color: transparent;"
                                :style="{ 'transform': v.sample_list.length > pageSzie ? ' translateX(-140%) translateY(-20%)' : ' translateX(-140%) translateY(-20%)' }">
                                <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                    width="150px;" height="150px;">
                            </div>
                            <div
                                style="margin-left: 100%;margin-top: 30px; white-space: nowrap; position: absolute; transform: translateX(-100%); font-family: 黑体;">
                                此处未盖本公司快检专用章，则本报告无效。
                            </div>
                        </div>
                        <!--//!检查人-->
                        <div style="display: flex; flex-direction: row; justify-content: space-between; width: 95%;">
                            <div
                                style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                                <div>检测人:</div>
                                <div style="position: absolute; left: 28%; top: -80%;"><span>
                                        <img v-if="$fn.isNotNull(v.detection_user_info.sign_image)" width="100px"
                                            height="40px" :src="v.detection_user_info.sign_image">
                                    </span>
                                </div>
                            </div>
                            <div
                                style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                                <div>审核人:</div>
                                <div style="position: absolute; left: 28%; top: -60%;">
                                    <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/097aaf25-357c-44d6-8325-27a73b5efde6.png"
                                        width="100px" height="40px">
                                </div>
                            </div>
                            <div style="width: 34%;"><span
                                    style="font-size: 16px; font-weight: bold; font-family: 黑体;">签发日期:</span> <span
                                    style="font-family: 宋体; font-size: 16px; color: black;">{{
                                        vk.pubfn.timeFormat(v.detect_time, "yyyy年MM月dd日") }}</span></div>
                        </div>


                        <!--//!声明-->
                        <div style="margin-top: auto; width: 95%;padding-bottom: 10px;">
                            <span style="color: black; font-size: 9px; line-height: 10px; font-family: 宋体;">
                                <span
                                    style="font-weight: bold; font-size: 12px;line-height: 12px; font-family: 黑体;">注：请客户仔细阅读检测报告的申明</span>
                                <br>1. 委托单位信息和抽、送样者信息由委托方提供及确认，本检测室不对其真实性负责。
                                <br>2. 报告无“快检专用章”无效；报告随意涂改无效。
                                <br>3. 当结果未超出相关要求时，检测结果为“经检测XX残留量未超出相关要求”。
                                <br>4. 本报告仅对来样负责，若客户无特殊要求，已检样品将不作保存。
                                <br>5. 如果对检测报告有异议，应于报告出具之日起五日内向本公司提出，或者到有资质的权威检测机构进行验证，逾期不予受理。
                                <br>6. 若对报告真伪有疑问，可致电：13922173334、13760015306
                            </span>
                        </div>
                        <div
                            style="width: 95%;  padding: 0px; background-color: black;  margin-top: 3px; font-weight: bold;border-bottom-color: #000;border-bottom-style:solid ; border-bottom-width: 2px;">
                        </div>
                        <div
                            style="width: 95%;  padding: 0px; background-color: black;  margin-top: 5px; font-weight: bold;font-weight: bold;border-bottom-color: #000;border-bottom-style:solid ; border-bottom-width: 1px;">
                        </div>
                        <div
                            style="display: flex; align-content: space-between; width: 95%;color: #606266;margin-top: 10px;">
                            <div class="f:10" style="font-size: 10px; font-family: 黑体;">广 东 全 安 检 测 科 技 有 限 公 司</div>
                            <div
                                style="margin-left: 15%; font-size: 12px; font-family: 黑体; align-content: flex-end;color: #606266;">
                                地址：广州市白云区永平街永泰新村和街七巷22号之四5楼502房</div>
                        </div>
                        <div style="display: flex; width: 95%;padding-bottom: 5px;">
                            <div style="font-size: 10px; font-family: 黑体;color: #606266;">GuangDong QuanAn Testing
                                Technology
                                Co.,Ltd
                            </div>
                            <div style="margin-left: 9.5%; font-size: 10px; font-family: 黑体;color: #606266;">
                                客服电话：020-32784686</div>
                        </div>
                        <div v-if="v.sample_list.length > pageSzie"
                            style=" margin-bottom: 2px;padding-top: 5px;padding-bottom: 5px;font-size: 9px;">
                            <div>第{{ getMaxIndex(v) }}页</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template v-slot:footer="{ close }">
            <!--这里是底部插槽-->
            <el-button @click="print2">打 印</el-button>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="close">确 定</el-button>
        </template>
    </vk-data-dialog>
</template>

<script>
import {
    getLodop
} from '@/common/function/LodopFuncs.js'
import VueQr from 'vue-qr';
import Print from 'print-js'
import { slice } from 'lodash'
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
    components: {
        VueQr
    },
    props: {
        value: {
            Type: Object,
            default: function () {
                return {
                    show: false,
                    printData: []
                };
            }
        },
    },
    data: function () {
        // 组件创建时,进行数据初始化
        return {
            pageSzie: 18,
            page: {
                title: "标题",
                submitText: "确定",
                cancelText: "关闭",
                showCancel: true,
                top: "3vh",
                width: "806px",

            },
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {

                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "admin/bidding-booths/sys/batchUpdateBiddingTime",
                    // 表单字段显示规则
                    columns: [

 
                        { key: "selectfile", title: "选择文件", type: "text" },

                    ],
                    // 表单验证规则
                    rules: {

                    },
                    // 左侧label的宽度
                    labelWidth: "100px",
                    // 提交前执行
                    beforeAction: function (formData) {

                        formData.booths_ids = that.value.item.booths_ids;

                        return formData;
                    },
                }
            },
            logourl: require('@/static/logo.png')

        };
    },
    mounted() {
        that = this;

        that.init();
    },
    methods: {
        // 初始化
        init() {
            let { value } = that;



            //that.$emit("input", value);
        },
        handleImport() {
            this.$refs.file.click()
        },
        // 监听 - 页面打开
        onOpen() {

            that = this;
            let { item = {} } = that.value;
            that.form1.props.show = true;

        },
        // 监听 - 页面关闭
        onClose() {
            that.$refs.form1.resetForm(); // 关闭时，重置表单
        },
        // 监听 - 提交成功后
        onFormSuccess() {
            that.value.show = false; // 关闭页面
            that.$emit("success");
        },

        print2() {

            printJS({
                printable: `tableId-0`, // 'printFrom', // 标签元素id
                type: 'html',
                style: '@page {margin:1 1mm;font-size:7px} .daying {border-spacing:0;width:100%;border-collapse:collapse;font-family:宋体;color:#000} .daying td {border:1pxsolid#000;height:15px} .daying td label {font-size:14px} .daying td span{font-size:16px}', // 可选-打印时去掉眉页眉尾
                scanStyles: false,
                ignoreElements: [], // ['no-print']
                properties: null
            })
            let _updateIds = this.value.printData.map(x => x._id);
            vk.callFunction({
                url: 'admin/testing/detection-form/sys/update_print_count',
                data: {
                    _ids: _updateIds
                },
                success: (data) => {

                }
            });



        },
        // 根据 sample_list 长度计算行高
        calcRowHeight(length) {
            // return length < 20 ? 30 : 20;
            if (length == 47)
                return 28
            else
                return 30;
        },
        // 根据 sample_list 长度计算字体大小
        calcFontSize(length) {
            if (length == 47)
                return 13
            else
                return 14;

        },
        getsubList(list, index) {
            if (index == 1) {
                return list.slice(0, this.pageSzie);
            } else if (index == 2) {
                if (list.length <= 47)
                    return list.slice(this.pageSzie);
                else {
                    return slice(list, this.pageSzie + 1, 48);
                }
            } else if (index == 3) {
                return slice(list, 48, 80);
            } else if (index == 4) {
                return slice(list, 79, 120);
            }
        },
        getPageHeight(v) {
            let _height = 1200;
            if (v.sample_list.length < this.pageSzie) {
                return _height
            } else {
                _height = 1200 + (1200 * Math.ceil((v.sample_list.length - this.pageSzie) / (this.pageSzie * 1.8)))
            }
            console.log(_height);
            return _height;
        },
        getMaxIndex(v) {
            return this.numberToChinese(1 + Math.ceil((v.sample_list.length - this.pageSzie) / (this.pageSzie * 1.8)))
        },

        numberToChinese(num) {
            var chineseNumMap = [
                '零', '一', '二', '三', '四', '五', '六', '七', '八', '九'
            ];
            var chineseUnitMap = [
                '', '十', '百', '千'
            ];
            var sectionMap = [
                '', '万', '亿', '万亿'
            ];

            num = Math.abs(num); // 取绝对值，确保数字为正数
            var parts = []; // 存储分段后的数字字符串
            var part; // 当前处理的分段

            while (num > 0) {
                part = num % 10000; // 取当前最低四位数字
                if (part > 0) {
                    parts.unshift(chineseSection(part));
                }
                num = Math.floor(num / 10000); // 舍去最低四位数字
            }

            return parts.join('') || '零';

            function chineseSection(section) {
                var str = chineseNumMap[section % 10]; // 个位
                section = Math.floor(section / 10); // 十位及以上
                var unit = section % 10; // 十位
                if (unit > 1) {
                    str = chineseNumMap[unit] + chineseUnitMap[unit - 1] + str;
                }
                section = Math.floor(section / 10); // 百位及以上
                unit = section % 10; // 百位
                if (unit > 0) {
                    str = chineseNumMap[unit] + chineseUnitMap[2] + str;
                }
                section = Math.floor(section / 10); // 千位及以上
                unit = section % 10; // 千位
                if (unit > 0) {
                    str = chineseNumMap[unit] + chineseUnitMap[3] + str;
                }
                if (section > 0 && section < 10000) { // 万位及以上
                    str = chineseSection(section) + sectionMap[1] + str;
                }
                return str;
            }
        }
    },
    // 监听属性
    watch: {
        'value.printData'(val) {

            val.forEach(element => {
                if (element.sample_list.length < 10) {
                    const row = 10 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }

                } else if (element.sample_list.length > 10 && element.sample_list.length < 20) {
                    const row = 20 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }
                } else if (element.sample_list.length > 10 && element.sample_list.length < 30) {
                    const row = 30 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }
                } else if (element.sample_list.length > 10 && element.sample_list.length < 40) {
                    const row = 40 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }
                }
            });
        },

    },
    // 计算属性
    computed: {
        first15SampleList() {
            return this.sample_list.slice(0, this.pageSize);
        },
        // 使用计算属性来获取剩余的样本
        remainingSampleList() {
            return this.sample_list.slice(this.pageSize);
        },
    }
};
</script>

<style lang="scss" scoped>
// .daying {
//     border-spacing: 0;
//     width: 100%;
//     border-collapse: collapse;
//     font-family: 宋体;
//     color: #000
// }

// .daying td {
//     border: 1px solid #000;
//     height: 15px
// }

// .daying td label {
//     font-size: 14px
// }

// .daying td span {
//     font-size: 16px
// }
@page {
    size: A4;
    /* 指定页面大小，例如A4 */
    margin: 2cm;
    /* 设置默认的页边距，例如2厘米 */
}

.page-footer {
    position: fixed;
    bottom: 0;
    width: 100%
}
</style>
